<template>
  <div class="menu-left-box-" :class="`menu-left-box-${id}`"  :key="id" :style="{background: bagColor}">
    <div class="menu-left-box-content" :class="`menu-left-box-content${id}`">
        <template v-if="logo">  
         <div ref="logoRef"></div>
        </template>

      <div class="menu-left-box-hd w100" :class="footer?'is-footer':''">
        <slot></slot>
      </div>
      <template v-if="footer">  
         <div ref="footerRef" class="footer-box"></div>
        </template>
      <div class="menu-resize-" :class="`menu-resize-${id}`"  title="拖拽改变宽度">
        <div class="pro-av wh100">
          <div
            class="Collection-discount dsf dsfjcc dsfaic"
            :style="{ top: top }"
            title="收起展开"
            >
            <!-- @click.stop="isShowMenu" -->
          <span
            v-if="isShow"
              @click.stop="isShowMenu(false)"
          >
          <chevronLeft
              color="#000"
          /> 
        </span>
          <span
              v-if="!isShow"
              @click.stop="isShowMenu(true)"
          >
          <chevronRight
              color="#000"
          
          /> 
          </span>
            <slot name="collection"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, inject, render, h, defineEmits } from 'vue'
import chevronLeft from '@/assets/chevron-left.vue'
import chevronRight from '@/assets/chevron-right.vue'
const isShow = ref(true)
const menuWidth = ref(200)
const props = defineProps({
  top: {
    type: String,
    default: '80%'
  },
  id: {
    type: String,
    default: '1'
  },
  bagColor: {
    type: String,
    default: '#000'
  },
  logo: {
    type: Function,
  },
  footer: {
    type: Function,
  },
})

const logoRef:any = ref()
const footerRef:any = ref()
const emit = defineEmits(['getMenuWidth'])
// const getMenuWidth = inject('getMenuWidth')
const { top, id } = toRefs(props)
const setMenuWidth = () => {
  emit('getMenuWidth', menuWidth)
  // console.log('getMenuWidth', getMenuWidth)
  // !!getMenuWidth && getMenuWidth(menuWidth)
}
onMounted(() => {
  dragControllerLR()
  setMenuWidth()

  const domLogo = logoRef.value
  const domFooter = footerRef.value
  if(props?.logo && !!domLogo) {
    render(
    // @ts-ignore
    h(props?.logo(), {
      id: props.id,
      // contentData: props.itemData.contentData,
    }),
    domLogo
  )
  }
  if(props?.footer && !!domFooter) {
    render(
    // @ts-ignore
    h(props?.footer(), {
      id: props.id,
      // contentData: props.itemData.contentData,
    }),
    domFooter
  )
  }
})
const isShowMenu = (val:any) => {
  isShow.value = val
  if (val) {
    setWidth(menuWidth.value)
    menuWidth.value == 0 && (menuWidth.value = 200)
  } else {
    setWidth(0)
  }
  setMenuWidth()
}
// 左右拖动事件
const dragControllerLR = () => {
  let resize:any = document.getElementsByClassName(`menu-resize-${id.value}`)
  let left:any = document.getElementsByClassName(`menu-left-box-${id.value}`)
  let leftMenu:any = document.getElementsByClassName(`menu-left-box-content${id.value}`)
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e: any) {
      //颜色改变提醒
      resize[i].style.background = '#d6d6d6'
      let startX:any = e.clientX

      resize[i].left = resize[i].offsetLeft
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        let endX:any = e.clientX
        let moveLen:any = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度

        if (moveLen < 200) moveLen = 200 // 左边区域的最小宽度为50px
        if (moveLen > 500) moveLen = 500 //右边区域最小宽度为150px

        resize[i].style.left = moveLen // 设置左侧区域的宽度
        menuWidth.value = moveLen
        for (let j = 0; j < left.length; j++) {
          left[j].style.width = `${moveLen}px`
          leftMenu[j].style.width = moveLen + 'px'
        }
      }
      // 鼠标松开事件
      // eslint-disable-next-line no-unused-vars
      document.onmouseup = function (evt) {
        //颜色恢复
        resize[i].style.background = '#E6EAEF'
        document.onmousemove = null
        document.onmouseup = null
        resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      }
      resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false
    }
  }
  setMenuWidth()
}
const setWidth = (moveLen:any) => {
  // let left = document.getElementsByClassName('menu-left-box-')
  let left:any = document.getElementsByClassName(`menu-left-box-${id.value}`)
  // let menuContent = document.getElementsByClassName('menu-left-box-content')
  let menuContent:any = document.getElementsByClassName(`menu-left-box-content${id.value}`)
  for (let j = 0; j < left.length; j++) {
    left[j].style.width = moveLen + 'px'
    menuContent[j].style.width = moveLen + 'px'
    if (moveLen == 0 || moveLen == 200) {
      left[j].style.minWidth = moveLen + 'px'
      menuContent[j].style.minWidth = moveLen + 'px'
    }
  }
}
</script>
<style>
.wh100 {
  width: 100%;
  height: 100%;
}
/*左侧div样式*/
.menu-left-box- {
  min-width: 200px;
  width: auto;
  max-width: 500px;
}
.menu-left-box-content,
.menu-left-box-hd {
  width: 100%;
  height: 100%;
  position: relative;
}
.is-footer {
  height: calc(100% - 60px);
}

.footer-box {
    width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  border: 1px solid #5A6875;
}
/* 拖拽区div样式 */
.menu-resize- {
  cursor: w-resize;
  position: absolute;
  background-color: #E6EAEF;
  border-radius: 5px;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-size: cover;
  background-position: center;
  color: white;
  z-index: 999;
}
.pro-av {
  position: relative;
}
.Collection-discount {
  position: absolute;
  width: 16px;
  height: 40px;
  top: 20%;
  right: -15px;
  background: #fff;
  z-index: 999;
  box-sizing: border-box;
  border: 1px solid #e6eaef;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;

}

/*拖拽区鼠标悬停样式*/
.move:hover {
  color: #444444;
}
</style>
